<template>
  <div class="test-container">
    <h3>Test.vue组件--{{info}}</h3>
    <h4>书籍:{{books.length}}</h4>
    <p>message:{{message}}</p>
    <button @click="message += '~'">修改message的值</button>
  </div>
</template>

<script>
export default {
  props: ['info'],
  data() {
    return {
      message: "hello test.vue",
      books: []
    }
  },
  methods: {
    show() {
      console.log("调用test组件的show方法！")
    },
    //使用Ajax请求图书列表的数据
    initBookList() {
      const xhr = new XMLHttpRequest();
      xhr.addEventListener('load',() => {
        const result = JSON.parse(xhr.responseText);
        console.log(result)
        this.books=result.data
      })
      xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
      xhr.send()
    }
  },
  beforeCreate() {
    //没有太大意义
    // console.log(this.info)
    // console.log(this.message)
    // this.show()
  },
  created() {
    console.log(this.info)
    console.log(this.message)
    this.show()
    //created生命周期函数，非常常用
    //经常在里面调用medthods中的方法，请求服务器的数据
    //并且把请求到的数据，转存到data中，供template模板渲染的时候使用
    this.initBookList()
  },
  beforeMount() {
    //没有太大意义,无法操作dom结构
  },
  mounted() {
    //可以操作dom结构
    const elementsByTagName = document.querySelector(".test-container h3");
    console.log(elementsByTagName)
  },
  beforeUpdate() {
    //数据发生变化时触发
    console.log("触发了beforeUpdate()")
    console.log(this.message)
    const p = document.querySelector('.test-container p');
    console.log(p.innerHTML)
  },
  updated() {
    console.log("触发了updated()")
    console.log(this.message)
    const p = document.querySelector('.test-container p');
    console.log(p.innerHTML)
  },
  beforeDestroy() {
    console.log("beforeDestroy()")
  },
  destroyed() {

  }
}
</script>

<style lang="less" scoped>
.test-container {
  background-color: pink;
  height: 200px;
}
</style>